import React, { useState, useEffect } from 'react'
import DocumentTitle from 'react-document-title'
import { getCategoryList } from '@api/home'
import { CategoryStyle } from './style'


import { FirstCategory, SecondCategory } from './component'
import { Toast } from 'antd-mobile'


const Category = (props) => {


  const [firstCategory, setFirstCategory] = useState([])
  const [secondCategory, setSecondCategory] = useState([])


  useEffect(() => {
    let config = {
      code: 0
    }
    getCategoryList(config).then(res => {
      if (res.status === 200) {
        setFirstCategory(res.data)
        config.code = res.data[0].code
        getCategoryList(config).then(res => {
          setSecondCategory(res.data)
        })
      } else {
        Toast.info('网络错误(4005)')
      }
    })
  }, [])

  return (
    <>
      <DocumentTitle title={props.route.title} />

      {firstCategory.length > 0 && secondCategory.length > 0 &&

        <CategoryStyle>
          <div className="category-box flex-row">

            <FirstCategory firstCategory={firstCategory} getData={e => { getSecondDataList(e) }} />

            <SecondCategory secondCategory={secondCategory} />

          </div>
        </CategoryStyle>

      }
    </>
  )

  function getSecondDataList(code) {
    getCategoryList({ code: code }).then(res => {
      if (res.status === 200) {
        setSecondCategory(res.data)
      }
    })
  }
}

export default Category